<template>
  <view class="setphone">
		<view class="formation">
			<view class="labelBox" style="border: 1rpx solid #ccc;border-radius: 10rpx;">
				<view class="input">
					<uni-easyinput v-model="phone" placeholder="手机号"></uni-easyinput>
				</view>
			</view>
			<view class="verifyBox" style="border: 1rpx solid #ccc;border-radius: 10rpx;">
				<view class="input">
					<uni-easyinput v-model="code" placeholder="验证码">
						
					</uni-easyinput>
					<view v-if="!count_down" @click="getMsgCode()"
						style="text-align: center;line-height: 70rpx;font-size: 24rpx;color: #fff; width: 150rpx;height: 70rpx;background: #3381FF;border-radius:10rpx;">
						获取验证码</view>
					<view v-else
						style="text-align: center;line-height: 70rpx;font-size: 24rpx;color: #fff; width: 150rpx;height: 70rpx;background: #ccc;border-radius:10rpx;">
						重新获取{{ count_down }}s</view>
				</view>
			</view>
			<view v-if="phones==''" @click="bdphones()" style="margin: 0 auto;margin-top: 70rpx; width: 600rpx;height: 80rpx;border-radius: 20rpx;text-align: center;line-height: 80rpx;font-size: 26rpx;color: #fff;background-color: #3381FF;">
				确定
			</view>
			<view v-else @click="editUsers()" style="margin: 0 auto;margin-top: 70rpx; width: 600rpx;height: 80rpx;border-radius: 20rpx;text-align: center;line-height: 80rpx;font-size: 26rpx;color: #fff;background-color: #3381FF;">
				确定
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {userStore} from '@/store/user.js'//引入空间
	const userStores = userStore()//给空间命名
	const { user} = storeToRefs(userStores);//解构数据
	const {proxy} = getCurrentInstance()
	const code=ref('')
	const phone=ref('')
	const count_down=ref('')
	const phones=ref('')

	onLoad((options)=>{
		phones.value = user.phonenumber
		console.log(options);
		id.value = options.id
		uni.setNavigationBarTitle({
			title:options.id
		})
	}) 
	
	//绑定手机号
	const bdphones=async()=>{
		var data = {phonenumber:phone.value,phoneCode:code.value}
		const result = await proxy.$api.bdphone(data)
		if(result.code==200){
			uni.showToast({
				title: '修改成功',
				icon: 'none',
				duration:1000
			})
			setTimeout(()=>{
				uni.switchTab({
					url:'/pages/home/home'
				})
			},1000)
		}else{
			uni.showToast({
				title:result.msg,
				icon:'none',
				duration:1000
			})
		}
	}
	// 点击获取验证码时开始倒计时
	const getMsgCode=()=> {
		code.value = ''
		var phone = phone.value //校验电话号码
		let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
	
		if (!reg.test(phone) || phone == "") {
			phone.value= ''
			uni.showToast({
				title: '请输入正确的手机号码！',
				icon: 'none',
				duration: 700
			})
			return
		}
		// 请求接口获取验证码，然后倒计时
		count_down.value = 60 // 倒数60秒
		countDown()
		hqyam() //开始发送验证码
	}
	// 倒计时
	const countDown=()=> {
		const timer = setInterval(() => {
			count_down.value = count_down.value - 1
			if (count_down.value < 10) count_down.value = '0' + count_down.value
			if (count_down.value <= 0) {
				clearInterval(timer)
				count_down.value = ''
			}
		}, 1000)
	}
	// 获取验证码
	const hqyam=async()=>{
		console.log('获取验证码');
		var data = {phone: phone .value}
		const result = await proxy.$api.setphone(data)
		if(result.code==200){
			console.log('验证码',res);
		}else{
			uni.showToast({
				title: result.msg,
				icon: 'none',
				duration:1000
			})
		}
	}
	//修改头像昵称
	const editUsers=async()=> {
		var phone = phone.value //校验电话号码
		let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
					
		if (!reg.test(phone) || phone == "") {
			phone.value= ''
			uni.showToast({
				title: '请输入正确的手机号码！',
				icon: 'none',
				duration: 700
			})
			return
		}
		if(code.value==''){
			uni.showToast({
				title: '请输入验证码！',
				icon: 'none',
				duration: 700
			})
			return 
		}
		var data = {phonenumber:phone.value,phoneCode:code.value}
		const result = await proxy.$api.editUser(data)
		if(result.code==200){
			uni.showToast({
				title: '修改成功',
				icon: 'none'
			})
			uni.navigateBack()
		}
	}

</script>

<style lang="scss">
 .setphone{
	 background-color: #eee;
	 width: 750rpx;height: 100vh;
	 padding-top: 100rpx;
	 box-sizing: border-box;
	 .formation {
	 	width: 710rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		padding:40rpx  30rpx 80rpx 30rpx; 
		box-sizing: border-box;
		background-color: #fff;
	 
	 	.labelBox {
	 		margin: 10px 0px;
	 
	 	}
	 
	 	.verifyBox {
	 		.input {
	 			display: flex;
	 			align-items: center;
	 
	 			.verify {
	 				background-color: $blue;
	 				color: white;
	 				margin-left: 10px;
	 				height: 70rpx;
	 				padding: 0px 10px;
	 				border-radius: 5px;
	 				text-align: center;
	 				display: flex;
	 				align-items: center;
	 			}
	 		}
	 	}
	 }
 }

.is-input-border {
	border: none !important;
	border-radius: 10rpx !important;
}
	
</style>
